<!DOCTYPE html>
<html>
<head>
    {include file='public/meta'/}

    <link rel="stylesheet" href="__STATIC_URL__/static/css/bootstrapSwitch.css">
    <link rel="stylesheet" href="__STATIC_URL__/static/css/setcard.css"/>
    <link rel="stylesheet" href="__STATIC_URL__/static/css/coupon.css"/>
    <link rel="stylesheet" href="__STATIC_URL__/static/checkbox/bower_components/Font-Awesome/css/font-awesome.css"/>
    <link rel="stylesheet" href="__STATIC_URL__/static/checkbox/demo/build.css"/>


    <script src="__STATIC_URL__/static/js/bootstrapSwitch.js"></script>


    <style>

        /***/
        .checkbox-info{
            margin-left: 10px;
        }
        .checkbox{
            display:inline-block;
        }
        .ng-scope input {
            width: 232px;
            margin-left: 5px;
            opacity: 1;
        }
        #img{
            opacity: 0;
        }
        .img {
            width: 318px;
            height: 203px;
            display: inline-block;
            background-size: 100%;
        }


        @media (min-width: 768px) {
            .modal-dialog {
                width: 600px;
                margin: 200px auto;
            }
        }
        .ng-scope select {
            width: 70%;
            opacity: 1;
        }
        .fllist{
            margin: 10px;
            display: inline-block;
            border: 1px solid #c7c7c7;
            padding: 7PX;
        }
        .glyphicon-remove-circle{
            color: #ff5656;
        }
        .ng-scope input {
            width:70%;
            margin-left: 5px;
            opacity: 1;
        }

        .addcardlist{
            padding:7px 7px;
        }
        .ant-upload-list-item-info {
            background: transparent;
            position: relative;
            width: 120px;
            height: 96px;
            margin: 0 8px 8px 0;
            border-radius: 6px;
            overflow: hidden;
        }
        .upImage {
            position: relative;
        }
        .deluplod {
            cursor: pointer;
            display: inline-block;
            position: absolute;
            color: #fff;
            width: 45px;
            right: -3px;
            top: 10px;
        }
        .ng-scope input.inlineCheckbox1{
            height: 16px;
            width:16px;
            margin-left: -1px;
            margin-top:9px;
        }
        .tipsInfo {
            color: #999;
            font-size: 12px;
            line-height: 32px;
        }
       .form-horizontal{
           margin-top:10px;
       }
        .form-horizontal .form-group{
            margin-top:20px;
        }

    </style>
</head>
<body>
{include file='public/header'/}
<!------------------导航-------------------------->
<section>
    {include file='public/left'/}
    <!--------------------------主要内容区域------------------------------------->
    <div class="content">

        <div class="panel mgl15 mgr15">
            <div class="panel-body">
                <!--路径导航-->
                <ol class="breadcrumb">
                    <li>当前位置是&nbsp;:</li>
                    <li>
                        <a href="{:url('cardgifts/cardgiftracklist')}">货架管理</a>
                    </li>
                    <li class="active" style="color: #02b87f;">礼品卡集设置</li>
                </ol>
                <div>


                    <div class="panel panel-default ng-scope">
                        <form action="" method="post"  id="formcate">
                            <div class="panel-heading">
                                礼品卡集设置
                            </div>
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="form-horizontal" data-layout="horizontal">
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">选择分类：</label>
                                                <div class="col-sm-8">
                                                    <select  id="category_index" class="form-control" name="category_index">
                                                        <option value="0">请选择</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-horizontal" data-layout="horizontal">
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">标题：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span></label>
                                                <div class="col-sm-8">
                                                    <input type="text"  id="title2" name="title" class="form-control" maxlength="12" required placeholder="" value="" />
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-horizontal" data-layout="horizontal">
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">主题图片：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span></label>
                                                <div class="col-sm-8">
                                                    <img src="__STATIC_URL__/static/images/commodityImg7.png"  alt="商品图片" class="img">
                                                    <div class="ng-scope" style="position: relative;">
                                                        <span class="btn btn-default">上传图片</span>
                                                        <input type="file" id="img" value="" style="width:82px"  onchange="upload('img','file','theme_pic_url')"/>
                                                        <input type="hidden"  id="theme_pic_url" required  value="" name="theme_pic_url">

                                                    </div>
                                                    <div class="r-desc ng-binding ng-scope"> 图片建议尺寸：750px*630px，格式为.jpg，大小不超过2M.</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-horizontal">
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">
                                                    主题标题颜色：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span>
                                                </label>
                                                <div class="col-sm-8">
                                                    <div class="cover" id="colors">
                                                        <input type="hidden" name="title_color" value="#63b359">
                                                        <ul class="color-list clearfix">
                                                            <li class="color selected" style="background-color:#63b359;" data-color="#63b359"></li>
                                                            <li class="color" style="background-color:#2c9f67;" data-color="#2c9f67"></li>
                                                            <li class="color" style="background-color:#509fc9;" data-color="#509fc9"></li>
                                                            <li class="color" style="background-color:#5885cf;" data-color="#5885cf"></li>
                                                            <li class="color" style="background-color:#9062c0;" data-color="#9062c0"></li>
                                                            <li class="color" style="background-color:#d09a45;" data-color="#d09a45"></li>
                                                            <li class="color" style="background-color:#e4b138;" data-color="#e4b138"></li>
                                                            <li class="color" style="background-color:#ee903c;" data-color="#ee903c"></li>
                                                            <li class="color" style="background-color:#f08500;" data-color="#f08500"></li>
                                                            <li class="color" style="background-color:#a9d92d;" data-color="#a9d92d"></li>
                                                            <li class="color" style="background-color:#dd6549;" data-color="#dd6549"></li>
                                                            <li class="color" style="background-color:#cc463d;" data-color="#cc463d"></li>
                                                            <li class="color" style="background-color:#cf3e36;" data-color="#cf3e36"></li>
                                                            <li class="color" style="background-color:#5E6671" data-color="#5E6671"></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-horizontal" data-layout="horizontal">
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">选择礼品卡：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span></label>
                                                <div class="col-sm-8" id="lpcard">

                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-horizontal" data-layout="horizontal">
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">卡面：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span></label>


                                                <div class="col-sm-8 ">
                                                    <p class="tipsInfo"> 图片建议尺寸：大小控制在1000像素*600像素以下，大小不超过2M.</p>

                                                    <div class="frm_controls frm_vertical_lh">

                                                        <div class="brand_item">
                                                            <div class="imagetxts">
                                                                <div class="ant-upload-list-item-info" style=" display: none; ">
                                                                    <img  src=""  class="imageShow">
                                                                    <i class="icon-close anticon-delete imgTxtDel glyphicon glyphicon-remove-circle"></i>
                                                                </div>
                                                                <div>
                                                                    <input type="hidden" value class="cardTextImages_id valid" tip-idx name="pic_item_list[default_gifting_msg][]">
                                                                    <input type="hidden" value class="wechatImage valid" tip-idx name="pic_item_list[background_pic_url][]">
                                                                    <input type="hidden"  value class="valid" tip-idx>
                                                                    <input type="file" class="imageTxtFile valid" value style="display:none;"  tip-idx>
                                                                </div>
                                                                <div class="upImage">
                                                                    <i class="icon-picture"></i>
                                                                    上传图片
                                                                    <div class="deluplod" style="display: none;">
                                                                        <i class="icon-close glyphicon glyphicon-remove-circle"></i>
                                                                    </div>
                                                                </div>
                                                                <!--<div>-->
                                                                <!--<textarea class="imageTxt-txt form-control valid" name="advanced_info[text_image_list][text][]" placeholder="图文内容建议上传商品、服务、环境等优质图片，并辅之以简单描述" maxlength="170"  style=" width: 370px;"></textarea>-->
                                                                <!--</div>-->


                                                            </div>
                                                            <div class="adduplod addImageTxt">
                                                                添加卡面
                                                            </div>

                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>


                                    </div>
                                </div>

                            </div>
                            <div class="panel-footer" style="text-align: center;">
                                <button class="btn btn-success" type="button" onclick="btns()" style="padding:8px 30px;    margin-left: -379px;">保存</button>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>
        {include file='public/footer'/}
    </div>
</section>


<script src="__STATIC_URL__/static/laydate/laydate.js"></script>
<script>
    $(function(){
        $(".color-list li").click(function() {
            $(".color-list li").removeClass("selected");
            $(this).addClass("selected");
            var colors = $(this).attr("data-color");
            $(".card_section").css("background-color", colors);
            $(".ljsy").css("background-color", colors);
            $("input[name='title_color']").val(colors);
        });
        $.ajax({
            url: "{:url('cardgifts/getcardrackcate')}",
            type: "post",
            data: {},
            success: function (data) {
                // console.log(33,data);
                var data=data.data;
                var fl="";
                $("#category_index").html("");
                var sfl="<option value=''>请选择</option>";
                // console.log(33,data.length);
                for (var i = 0; i < data.length; i++) {

                    fl += "<option value='"+i+"'>"+data[i].title+"</option>"

                }
                $("#category_index").append(sfl+fl);
            }
        })

        $.ajax({
            url: "{:url('cardgifts/getcardgiftlist')}",
            type: "post",
            success: function (data) {
                // console.log(data);
                $("#lpcard").html("");
                if (data.code == 0) {
                    var datas = data.data;
                    // console.log(datas);
                    for (var i = 0; i < datas.length; i++) {

                        fl =" <div class='checkbox checkbox-info'>\n" +

                            "<input type='checkbox' id='card"+[i]+"' class='inlineCheckbox1' value='"+datas[i].card_id+"' data-title='"+datas[i].title+"' name='item_list[][card_id]'> \n" +
                            " <label for='card"+[i]+"'>"+datas[i].title+"</label>\n" +
                            "</div>\n" ;
                        $("#lpcard").append(fl);
                    }



                }
            }
        })
    })
</script>
<script>
    // 添加图文
    $(".addImageTxt").click(function() {
        if ($(".imagetxts").length < 5) {
            var index = $(".imagetxts:last").data("data-index");
            var template = ' <div class="imagetxts">\n' +
                '                                                                <div class="ant-upload-list-item-info" style=" display: none; ">\n' +
                '                                                                    <img src="" class="imageShow">\n' +
                '                                                                    <i class="icon-close anticon-delete imgTxtDel glyphicon glyphicon-remove-circle"></i>\n' +
                '                                                                </div>\n' +
                '                                                                <div>\n' +
                '                                                                    <input type="hidden" value class="cardTextImages_id valid" tip-idx name="pic_item_list[default_gifting_msg][]">\n' +
                '                                                                    <input type="hidden" value class="wechatImage valid" name="pic_item_list[background_pic_url][]" tip-idx>\n' +
                '                                                                    <input type="file" class="imageTxtFile valid" value="" style="display:none;" tip-idx>\n' +
                '                                                                </div>\n' +
                '                                                                <div class="upImage">\n' +
                '                                                                    <i class="icon-picture"></i>\n' +
                '                                                                     上传图片\n' +
                '                                                                    <div class="deluplod" style="display: none;">\n' +
                '                                                                        <i class="icon-close glyphicon glyphicon-remove-circle"></i>\n' +
                '                                                                    </div>\n' +
                '                                                                </div>\n' +

                '                                                            </div>';

            $(this).before(template);
            if ($(".deluplod").length > 1) {
                $(".deluplod").css("display", "inline");
            }
            if ($(".imagetxts").length == 5) {
                $(this).hide();
            }
        }

    });
    // 上传图片
    $(".brand_item").delegate('.upImage', "click", function() {
        var $parent = $(this).closest(".imagetxts");
        var $file = $parent.find(".imageTxtFile");
        $file.click();
        // console.log(22,$file);
    });
    // 删除
    $(".brand_item").delegate('.deluplod', "click", function(event) {
        $(this).closest(".imagetxts").remove();
        if ($(".deluplod").length == 1) {
            $(".deluplod").hide();
        } else {
            $(".deluplod").css("display", "inline");
        }
        if ($(".imagetxts").length < 5) {
            $(".addImageTxt").show();
        }
        event.stopPropagation();
    });

    // 图片上传
    $(".brand_item").delegate('.imageTxtFile', "change", function() {
        var $parent = $(this).closest(".imagetxts");
        var index = $parent.attr("data-index");
        var formData = new FormData();
        var file = "file";
        formData.append('file', $(this)[0].files[0]);
        formData.append('other',file);

        // console.log(123);
        $.ajax({
            url: "{:url('uploads/upload')}",
            type: 'POST',
            cache: false,
            data: formData,
            processData: false,
            contentType: false,

        }).done(function (res) {
            // console.log(res);
            $parent.find(".deluplod").show();
            $parent.find(".imageShow").parent().show();
            $parent.find(".imageShow").attr("src", res.pic);
            $parent.find(".upImage").hide();
            if (res.code == 0) {
                $parent.find(".wechatImage").val(res.pic);
            } else {
                layer.msg('图片上传失败');
                imgRemoveStyle($parent);
            }
        }).fail(function (res) {
            alert("上传失败")
        });
    });
    // 图片删除
    $(".upload-v-img").click(function(){

        $("#fimg").attr("style","display:none");
        $(".img").attr("src", "");
        $(".fengmian_img_parent").addClass("hide");
    })

    // 图片删除
    $(".brand_item").delegate('.imgTxtDel', "click", function() {
        var $parent = $(this).closest(".imagetxts");
        // console.log($parent);
        imgRemoveStyle($parent);
    });
    // 图片删除效果
    function imgRemoveStyle($parent) {
        $parent.find(".imageShow").attr("src", "");
        $parent.find(".imageShow").parent().hide();
        $parent.find(".wechatImage").val("");
        $parent.find(".image").val("");
        $parent.find(".imageTxtFile").val("");
        $parent.find(".upImage").show();
    }

</script>


<script>


</script>
<script>
    function upload(file, typed,inputid) {
        var formData = new FormData();
        formData.append('file', $('#' + file)[0].files[0]);
        formData.append('other', file);
        $.ajax({
            url: "{:url('uploads/upload')}",
            type: 'POST',
            cache: false,
            data: formData,
            processData: false,
            contentType: false,
        }).done(function (res) {
            // console.log(res);
            if(res.code=="0"){
                //            左侧预览图背景
                $(".commodityImg").attr("src", res.pic);
//            右侧预览图片
                $("."+ file).attr("src", res.pic);
//            相应隐藏input传值
                $("#"+inputid).val(res.pic);
            }else{
                layer.alert(res.message);
            }

            // $("." + file).attr("src", res.savapath).css("display", "block");
            // $(".file-" + file).val(res.other);
            // $("." + typed + "-" + file).val(res.other);
        }).fail(function (res) {
            alert("上传失败")
        });
    };
</script>
<script>
    $("#multi").on('switch-change', function (e, data) {
        var $el = $(data.el), value = data.value;
        if(value==true){
            $("#support_multi").val(1);
        }else{
            $("#support_multi").val(0);
        }
    });
    $("#self").on('switch-change', function (e, data) {
        var $el = $(data.el), value = data.value;
        if(value==true){
            $("#support_buy_for_self").val(1);
        }else{
            $("#support_buy_for_self").val(0);
        }
    });
</script>
<script>
    function btns(){
        var title2=$("#title2").val();


        var theme_pic_url = $('#theme_pic_url').val();

        var cardl= $("input[type='checkbox']").is(':checked')

        if(title2==""){
            layer.msg('请填写标题！');
            return false;
        }
        if(theme_pic_url==""){
            layer.msg('请上传主题图片。');
            return false;
        }
        // console.log(333,cardl);
        if(cardl==false){
            layer.msg('请选择礼品卡！');
            return false;

        }

        var imglists=$("input[name^='pic_item_list[background_pic_url]']").val()
        if(imglists==""){
            layer.msg('请上传卡面图片！');
            return false;
        }
        // 校验通过，全部都不相同
        $.ajax({
            url: "{:url('cardgifts/cardgiftrackthemeadd')}",
            type: "post",
            data: $("#formcate").serialize(),
            success: function (data) {
                // console.log(363,data);
                if(data.code==0){
                    layer.msg(data.message);
                    setTimeout(function(){
                        window.location.href = "{:url('cardgifts/cardgiftrackthemelist')}";

                    },1500)
                }else{
                    layer.msg(data.message);
                }

            }
        })
    }
</script>
</body>

</html>
